<template>
<div class="box">
<div class="top">
      <el-page-header  content="消息通知">
      </el-page-header>
  </div>
<div class="app">
 <div class="report" v-for="(item, index) in data" :key="index"  >
   <div class="img"></div>
   <div class="title">{{item.msg}}</div>
   <div class="content"><span class="zi">{{item.area}}</span></div>
   <div class="el-icon-arrow-right"></div>
 </div>
</div>
</div>
</template>
<script>
export default {
  data() {
    return {
      data:''
    }
  },
  created:function(){
    var r=this
    this.$axios({
      url:'http://118.89.187.251/index.php/index'
    })
    .then(function(res){
      r.data=res.data.data
    console.log(res.data.data)

    })
  }
}
</script>

<style>
.box{
  width: 400px;
  height: 748px;
}
.top{
  height: 5%;
  /* background-color: antiquewhite; */
  border-bottom:1px solid black;
}
.app{
  width: 100%;
  height: 94%;
  /* background-color: blanchedalmond */
}
.report{
  width: 90%;
  height: 8%;
  margin-top: 3%;
  margin-left: 5%;
  /* background-color: rgb(184, 221, 147); */
  border-bottom: 1px solid gainsboro;
}
.img{
  width: 15%;
  height: 70%;
  background-color: rgb(236, 238, 240);
  border-radius: 80%;
  margin-left: 4%;
  float: left;
}
.title{
  width: 30%;
  height: 40%;
  float: left;
  margin-left: 5%;
}
.content{
  width: 60%;
  height: 40%;
  float: left;
  margin-top: 10%;
  margin-left: -30%;
}
.zi{
  font-size: 0.1px;
}
.el-icon-arrow-right{
  margin-top:5%;
}
</style>